<template>
  <div>
    <div class="v-container">
      <v-header title="EXEED星途限量尊享车主权益">
        <span class="back" @click="goBack">
          <i class="el-icon-arrow-left"></i>
        </span>
      </v-header>
      <div class="mt">
        <div class="top_font">
          <p class="p1">车主任选一种服务权益方案，可获得一年使用权</p>
          <p class="p2" @click="$router.push('/')">点击查看各项服务细则详情&gt;&gt;</p>
        </div>
        <div class="conWrap">
          <div class="con_ele" v-for="(data,key,index) in dataShow" v-bind:key="index">
            <div class="con g-clearfix">
              <div class="c_title">
                <p>{{data.name}}:</p>
              </div>
              <div class="c_list g-clearfix">
                <div class="c_e" v-for="(data2,key2,index2) in data.list" v-bind:key="index2">
                  <img :src="data2.img">
                  <p class="h1">{{data2.h3}}</p>
                  <p class="h2">{{data2.p}}</p>
                </div>
              </div>
              <div class="c_select" v-on:click="selectFun(data.name,data,$event)">
                <img v-show="data.select" src="@/assets/images/btnSelect.png" width="25">
                <img v-show="!data.select" src="@/assets/images/btnUnSelect.png" width="25">
              </div>
            </div>
          </div>
        </div>
        <div class="button-box" v-on:click="submit">
          <p>立即兑换</p>
        </div>
      </div>
    </div>

    <mt-popup v-model="popupVisible" style="width:100%" position="bottom">
      <div id="login-title" style="background-color: #fff;margin-top: 10px;padding:10px">
        <h3 class="h3-style2" style="margin:0px 0px 0px 5px;">机场贵宾服务</h3>
      </div>
      <mt-navbar v-model="selected" style="color:#333333">
        <mt-tab-item id="1">服务规则</mt-tab-item>
        <mt-tab-item id="2">注意事项</mt-tab-item>
        <mt-tab-item id="3">免责条款</mt-tab-item>
      </mt-navbar>

      <!-- tab-container -->
      <mt-tab-container v-model="selected" style="color:#999999;padding:20px">
        <mt-tab-container-item id="1">
          <ul>
            <li>1. 服务范围：覆盖全国105个城市，具体机场及航站楼详见“机场贵宾厅服务范围”；</li>
            <li>2. 服务对象：星途尊享权益车主；</li>
            <li>3. 服务响应时间：全天24小时可在线/来电预约服务，贵宾厅营业时间详见文件“机场贵宾厅服务范围”；</li>
            <li>4. 此项服务仅限星途尊享权益车主使用，自线上提交、核验权益车主身份信息后一年内，享有无限次机场贵宾厅服务；</li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <ul>
            <li>1. 醉酒或处于无意识状态且无人陪同的客户；</li>
            <li>2. 客户携带具有危险性的物质和物品以及国家法律规定违禁物品；</li>
            <li>3. 客户未妥善保管随身携带的贵重物品发生丢失，我方不承担举证责任；</li>
            <li>4. 客户在服务过程中干扰服务人员工作或者要求违规操作的；</li>
            <li>5. 客户刻意破坏并裹挟贵宾候车室内物品的行为；</li>
            <li>6. 客户不遵守贵宾候车室守则，大声喧哗，无理取闹等；</li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <ul>
            <li>1. 需提前2-24小时线上/电话预约服务，预约信息提交完成后，权益人手机即可收到服务券码及贵宾厅位置相关信息，本服务预约后不可取消/修改；</li>
            <li>2. 贵宾厅服务时长的限制，详见“机场贵宾厅服务范围”所示；</li>
            <li>3. 服务现场需出示星途尊享权益车主身份证件或登机牌、服务券码，核验权益人身份后即可享用服务；</li>
            <li>4. 本服务仅限星途尊享车主本人使用，现场未通过身份核验的，无法享用本服务；非权益人本人现场使用服务的，需在现场另行付费使用（收费标准按贵宾厅现场明牌标示执行）；</li>
            <li>5. 如使用贵宾厅内的收费项目，客户需按厅内标明价值付费；</li>
          </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </mt-popup>
  </div>
</template>

<script>
import vHeader from "@/components/Header.vue";
import { Toast, MessageBox } from "mint-ui";
import { Resource } from "@/services/resource";
import LocalStorage from '@/services/storage';
export default {
  name: "equity",
  components: {
    vHeader
  },
  props: {
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      msg: "Footera",
      popupVisible: false,
      selected: "1",
      dataShow: [
        {
          name: "礼包A",
          select: false,
          type: 1,
          list: [
            {
              img: require("@/assets/images/h_e02.png"),
              h3: "高铁贵宾厅",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e05.png"),
              h3: "道路救援",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e03.png"),
              h3: "机场P+R停车",
              p: "全年12天"
            }
          ]
        },
        {
          name: "礼包B",
          select: false,
          type: 2,
          list: [
            {
              img: require("@/assets/images/h_e01.png"),
              h3: "机场贵宾厅",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e05.png"),
              h3: "道路救援",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e03.png"),
              h3: "机场P+R停车",
              p: "全年12天"
            }
          ]
        },
        {
          name: "礼包C",
          select: false,
          type: 3,
          list: [
            {
              img: require("@/assets/images/h_e02.png"),
              h3: "高铁贵宾厅",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e05.png"),
              h3: "道路救援",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e06.png"),
              h3: "洗车",
              p: "全年12次"
            }
          ]
        },
        {
          name: "礼包D",
          select: false,
          type: 4,
          list: [
            {
              img: require("@/assets/images/h_e05.png"),
              h3: "道路救援",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e03.png"),
              h3: "机场P+R停车",
              p: "全年12天"
            },
            {
              img: require("@/assets/images/h_e06.png"),
              h3: "洗车",
              p: "全年12次"
            }
          ]
        },
        {
          name: "礼包E",
          select: false,
          type: 5,
          list: [
            {
              img: require("@/assets/images/h_e05.png"),
              h3: "道路救援",
              p: "全年无限次"
            },
            {
              img: require("@/assets/images/h_e04.png"),
              h3: "酒后代驾",
              p: "全年12次"
            },
            {
              img: require("@/assets/images/h_e06.png"),
              h3: "洗车",
              p: "全年12次"
            }
          ]
        }
      ],
      selectData: ""
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    //选择服务
    selectFun(name, item, event) {
      let isSelct = true;
      if (item.select) {
        this.selectData = "";
        isSelct = false;
      } else {
        this.selectData = item;
      }
      this.dataShow.forEach(function(ele) {
        ele.select = false;
      });
      if (isSelct) {
        item.select = !item.select;
      }
    },
    // 兑换
    submit() {
      var _sD = this.selectData;
      if (_sD) {

      const msgBox = MessageBox({
        title: "提示",
        message: "确认兑换服务礼包后，将不能修改，您确认选择此方案吗?",
        showCancelButton: true
      });
      msgBox.then(action => {
        if (action === "confirm") {
        console.log(_sD);

        let loginStatus = LocalStorage.getLocalStorage('loginStatus');
        Resource.chooseService
          .post({}, { type: _sD.type, matrixContent: loginStatus })
          .then(res => {
            if (res.head.resultMsg == "SUCCESS") {
              //已发送
              Toast({
                message: "选择礼包成功",
                iconClass: "el-icon-success"
              });
              this.$router.push("/mainpage");
            } else {
              Toast({
                message: res.head.resultMsg,
                position: 'middle'
              });
            }
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
        }
      });
      } else {
        Toast({
          message: "请选择一种服务~"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./equity.less");
</style>